<template>
	<view>
		<u-navbar
			title="认养工单"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		<view style="padding: 0 16rpx;background-color: #fff;">
			<u-tabs :scrollable="false" lineWidth="30" :current="current" :list="dictList" @click="tabClick"  :lineColor="appColor" :activeStyle="{color: appColor}" :inactiveStyle="{color: '#333'}"></u-tabs>
		</view>
		<scroll-view @scrolltolower="onLower" :scroll-y="true" :style="{height: scrollViewHeight}">
			<template v-if="loading">
				<view style="padding: 32rpx;">
					<u-skeleton :avatarSize="0" style="margin-bottom: 32rpx;" :loading="loading" avatar rows="3" v-for="i in 8" :key="i"></u-skeleton>
				</view>
			</template>
			<template v-else-if="!loading && list.length === 0">
				<u-empty
				    mode="data"
					icon="http://cdn.uviewui.com/uview/empty/data.png"
				>
				</u-empty>
			</template>
			<template v-else-if="!loading && list.length > 0">
				<view style="padding: 32rpx;">
					<view class="plan-item" v-for="item in list" :key="item.id" @click="toDetail(item)">
						<view class="plan-item-t u-border-bottom">
							<text class="plan-item-t-l">{{item.workCategory_dictText}}</text>
							<text class="plan-item-t-r">进度({{item.progress}})</text>
						</view>
						<view class="plan-item-m">
							<text class="plan-item-m-l">任务编号:</text>
							<text class="plan-item-m-r">{{item.id}}</text>
						</view>
						<view class="plan-item-m">
							<text class="plan-item-m-l">任务状态:</text>
							<text class="plan-item-m-r" style="color: #faad14;" v-if="item.status === '0'">{{item.status_dictText}}</text>
							<text class="plan-item-m-r" style="color: #1890ff;" v-else-if="item.status === '1'">{{item.status_dictText}}</text>
							<text class="plan-item-m-r" :style="{color: appColor}" v-else>{{item.status_dictText}}</text>
						</view>
						<view class="plan-item-m">
							<text class="plan-item-m-l">任务类型:</text>
							<text class="plan-item-m-r">{{item.workOrder_dictText}}</text>
						</view>
						<view class="plan-item-m">
							<text class="plan-item-m-l">开始时间:</text>
							<text class="plan-item-m-r">{{item.createTime}}</text>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</template>
		</scroll-view>
	</view>
</template>

<script>
	import {adoptWorkTask, receive} from '@/api/me.js';
	import {mapActions} from 'vuex';
	export default {
		data() {
			return {
				pageSize: 8,
				pageNo: 1,
				list: [], // 工单列表
				dictList: [
					{name: '今日任务', value: '0'},
					{name: '历史任务', value: '1'},
				], // 字典列表
				loading: true,
				status: 'loadmore',
				current: 0,
			}
		},
		computed: {
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 - 44 + 'px';
			}
		},
		onShow() {
			// 获取字典表
			this.loading = true;
			this.getList();
			console.log('---');
		},
		methods: {
			...mapActions(['setDetail']),
			// 详情
			toDetail(item) {
				this.setDetail({detail: item});
				this.$cuNavigateTo('/pages/me/planDetail?id=' + item.id);
			},
			tabClick({index}) {
				this.current = index;
				this.pageNo = 1;
				this.getList();
			},
			// 优惠券列表
			getList() {
				if(this.pageNo === 1) {
					this.loading = true;
				}
				let category = this.dictList[this.current].value
				let postObj = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					status: Number(this.current) + 1
				}
				adoptWorkTask(postObj).then(res => {
					const {current, pages, records} = res.result;
					if(this.pageNo === 1) {
						let empty = [];
						this.list = empty.concat(records);
					} else {
						this.list = this.list.concat(records);
					}
					if(current >= pages) {
						this.status = 'nomore'
					} else {
						this.pageNo ++;
						this.status = 'loading'
					}
				}).finally(() => {
					this.loading = false;
				})
			},
			onLower() {
				if(this.status === 'loading') {
					this.getList();
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.plan-item {
		padding: 32rpx;
		border-radius: 16rpx;
		background-color: #fff;
		margin-bottom: 32rpx;
		.plan-item-t {
			padding-bottom: 24rpx;
			font-size: 32rpx;
			color: #333;
			margin-bottom: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.plan-item-t-l {
				font-weight: bold;
			}
			.plan-item-t-r {
				font-size: 28rpx;
			}
		}
		.plan-item-m {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			line-height: 28rpx;
			margin-bottom: 24rpx;
			color: #000;
			.plan-item-m-l {
				padding-right: 8rpx;
			}
			.plan-item-m-r {
				color: #333;
			}
		}
	}
</style>